<template>   
    <div class="body">
      <p style="color: darkred; font-size: large;">tex渲染pdf</p>   
      <el-upload
        ref="uploadFileRef"
        :name=state.upload_file 
        class="upload-demo"
        drag
        :file-list="fileList"
        :action="state.uploadTexServer2"
        :accept="state.accept"
        :multiple="false"
        :show-file-list="true"
        :on-success="handleSuccess"
        :on-error="handleError"
        :auto-upload="true"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
                文件拖拽这里或 <em>点击上传</em>
          </div>
        <template #tip>
          <div class="el-upload__tip">
            注意:只能上传{{ state.file_type }}文件,3MB以内。若需要渲染图片，将tex和图片文件夹images压缩到zip文件中
          </div>
        </template>
      </el-upload>
    </div>
  </template>
    
  <script setup>
    import { reactive, ref} from 'vue'
    import { Document, Upload } from '@element-plus/icons-vue'
    import { url_noapi, deepClone, uploadTexServer2} from '@/utils'
    import { ElMessage, ElMessageBox } from 'element-plus'  

    // const loading = ref(false)
    const uploadFileRef = ref(null)
    const fileList = ref([])  
    const state = reactive({
      file_type: 'tex或zip',
      accept: '.tex,.zip',
      upload_file: 'upload_file',
      // loading:false,
      uploadTexServer2,      
    })
    
   // 上传pdf文件成功
   const handleSuccess=(res)=> {
    // loading.value = true
    console.log("上传返回数据：",res)
      if(res.code==200){
        // loading.value = false
        ElMessage.success("请下载文件！")
        let url = res.data.results
        const link = document.createElement('a');
        link.href = url_noapi + url;
        link.setAttribute('download', 'download.pdf');
        // link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
      }else{
        ElMessage.warning("文件上传错误")
        ElMessageBox.alert(
          res.message,
          '请检查文件格式！',
          {
            dangerouslyUseHTMLString: true,
          }
        )
      }
    }
    // 上传失败处理
    const handleError=(res)=>{
      console.log("上传文件失败：", res)
    }    
  </script>
  <style scoped> 
  .body{
    width: 700px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: left;
    align-items: flex-start; 
  } 
  </style>